<template>
  <div class="detail-container">
    <!-- 页头 -->
    <div class="pageHeader-container">
      <el-page-header content="运单详情" @back="backToOrder" />
    </div>
    <!-- 卡片 -->
    <div class="card-container">
      <el-card class="card-inner">
        <el-row :gutter="20" class="card-row">
          <el-col :span="6" class="row-col"><div>订单编号：</div></el-col>
          <el-col :span="6" class="row-col"><div>运单编号：</div></el-col>
          <el-col :span="6" class="row-col"><div>下单时间：</div></el-col>
          <el-col :span="6" class="row-col"><div>订单状态：</div></el-col>
        </el-row>
        <el-row :gutter="20" class="card-row">
          <el-col :span="6" class="row-col"><div>预计到达时间</div></el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 折叠面板 -->
    <div class="collapse-container">
      <el-collapse v-model="activeName" class="collapse-inner" @change="handleChange">
        <el-collapse-item class="collapseItem" title="基本信息" name="1">
          <div class="timeline">
            <el-timeline>
              <el-timeline-item size="large" color="#105bde" icon="el-icon-location" timestamp="发货方" placement="top">
                <div class="timeline-content">
                  <el-row class="timeInfo">
                    <el-col :span="8"><span>发货方姓名：<span class="renderInfo">詹姆斯</span></span></el-col>
                    <el-col :span="8"><span>发货方电话：</span></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8"><span>发货方地址：</span></el-col>
                    <el-col :span="8"><span>详细地址：</span></el-col>
                  </el-row>
                </div>
              </el-timeline-item>
              <el-timeline-item size="large" color="#cf4141" icon="el-icon-location-outline" timestamp="收货方" placement="top">
                <div class="timeline-content">
                  <el-row class="timeInfo">
                    <el-col :span="8"><span>收货方姓名：</span></el-col>
                    <el-col :span="8"><span>收货方电话：</span></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8"><span>收货方地址：</span></el-col>
                    <el-col :span="8"><span>详细地址：</span></el-col>
                  </el-row>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-collapse-item>
        <el-collapse-item class="collapseItem" title="运输信息" name="1">
          <div class="steps-container">
            <el-steps>
              <el-step title="步骤 1" icon="el-icon-circle-check" />
              <el-step title="步骤 2" icon="el-icon-circle-check" />
              <el-step title="步骤 3" icon="el-icon-circle-check" />
            </el-steps>
          </div>
        </el-collapse-item>
        <el-collapse-item class="collapseItem" title="货品信息" name="1">
          <div>简化流程：设计简洁直观的操作流程；</div>
          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WaybillDetail',
  data() {
    return {
      activeName: '1'
    }
  }
}
</script>

<style lang="scss" scoped>
    .detail-container {
        background: rgb(243, 245, 249);

        .pageHeader-container {
            font-weight: bold;
            color: rgb(42, 41, 41);
            font-size: 20px;
            margin-bottom: 23px;
        }

        ::v-deep .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, el-card.is-hover-shadow:hover{
            box-shadow: none;
        }

        .card-inner {
            padding: 7px 0 7px 44px;
            // margin-bottom: 23px;

            .card-row {
                line-height: 2.6;

                .row-col {
                    padding-left: 10px;
                    padding-right: 10px;
                }
            }
        }

        .collapse-container .collapse-inner {

             ::v-deep .el-collapse-item__header {
                padding: 0 44px;
                align-items: center;
                height: 60px;
                line-height: 60px;
                background: #f8faff!important;
                border-radius: 4px 4px 0 0;
                color: #2a2929;
                cursor: pointer;
                border-bottom: 0;
                font-size: 16px;
                font-weight: 700;

            }

            .steps-container {
                padding: 24px 400px 0 44px;

                ::v-deep .el-step__line {
                    border-bottom: 1px solid #419eff;
                    background-color: transparent;
                }

                ::v-deep .el-icon-circle-check {
                    color: #419eff;
                }

                ::v-deep .el-step__title {
                    font-size: 14px;
                    font-weight: 400;
                    color: #20232a;
                }
            }

            .timeInfo {
                margin-bottom: 14px;
            }

            .renderInfo {
                color: #818693;
            }

            // 时间图标样式
            ::v-deep .el-timeline-item__node--large {
                width: 20px;
                height: 20px;
            }

            // 时间竖线样式
            ::v-deep .el-timeline-item__tail{
                width: 1px;
                height: 150px;
                border: 1px dashed #dcdcdd;
            }

            // 时间戳样式
            ::v-deep .el-timeline-item__timestamp {
                font-size: 16px;
                font-family: PingFangSC-Regular,PingFang SC;
                font-weight: 400;
                color: #20232a;
                line-height: 28px;
            }

            .collapseItem {
                margin-top: 20px;
            }

            .timeline {
                padding: 24px 0px;
                font-size: 13px;
                color: #303133;
                line-height: 1.769230769230769;
            }
        }
    }

</style>
